<template>
  <el-dialog
    :title="$t('m.CALL_RECORD_MANAGEMENT')"
    custom-class="record-dialog"
    :close-on-click-modal="false"
    :modal="false"
    :visible.sync="callDialog"
    :before-close="handleClose"
  >
    <div class="search-input">
      <!-- <span>呼叫类型:</span>
      <el-select
        @keyup.enter.native="handleSearch"
        popper-class="default-select-popper"
        style="width:15%"
        size="small"
        clearable
        v-model="value1"
      >
        <el-option
          v-for="item in callTypeMaps"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        >
          <span style="float: left">{{ item.name }}</span>
        </el-option>
      </el-select>
      <span>呼叫结果:</span>
      <el-select
        popper-class="default-select-popper"
        @keyup.enter.native="handleSearch"
        style="width:15%"
        size="small"
        clearable
        v-model="value1"
      >
        <el-option
          v-for="item in callResultMaps"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        >
          <span style="float: left">{{ item.name }}</span>
        </el-option>
      </el-select>-->
      <span>{{$t('m.CALL_TIME')}}</span>
      <el-date-picker
        size="small"
        v-model="query.begintime"
        style="width:20%"
        type="datetime"
        :placeholder="$t('m.tip.SELECT_START_TIME')"
      ></el-date-picker>&nbsp;--
      <el-date-picker
        size="small"
        v-model="query.endtime"
        style="width:20%"
        type="datetime"
        :placeholder="$t('m.tip.SELECT_END_TIME')"
      ></el-date-picker>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <!-- <el-input size="small" style="width: 130px">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>-->
      <el-button @click="handleSearch" size="small">{{$t('m.QUERY')}}</el-button>
    </div>
    <el-table
      :data="tableData"
      ref="table"
      height="400"
      style="width: 100%"
      :highlight-current-row="true"
      cell-class-name="table-cell-custom"
      header-cell-class-name="table-herder-custom"
      size="small"
    >
      <el-table-column width="55" type="selection" align="center"></el-table-column>
      <el-table-column prop="calledFullName" show-overflow-tooltip :label="$t('m.CALL_USER')"></el-table-column>
      <el-table-column prop="calledDevice" :label="$t('m.CALL_NUMBER')"></el-table-column>
      <el-table-column prop="beginTime" :label="$t('m.CALL_TIME')" width="180px">
        <template slot-scope="scope">
          {{ scope.row.beginTime.substr(0,4)}}/
          {{ scope.row.beginTime.substr(4,2)}}/
          {{ scope.row.beginTime.substr(6,2)}}
          {{ scope.row.beginTime.substr(8,2)}}:
          {{ scope.row.beginTime.substr(10,2)}}:
          {{ scope.row.beginTime.substr(12,2)}}
        </template>
      </el-table-column>
      <el-table-column prop="direct" :label="$t('m.CALL_TYPE')">
        <template slot-scope="scope">{{$t('m.dict.callType')[scope.row.direct] }}</template>
      </el-table-column>
      <el-table-column prop="remark" :label="$t('m.CALL_RESULT')"></el-table-column>
      <el-table-column prop="remark" :label="$t('m.REMARKS')"></el-table-column>
      <!-- <el-table-column align="center">
        <template slot-scope="scope" width="220px">
          <el-link @click="handleEdit(scope.row)">加入黑名单</el-link>
        </template>
      </el-table-column>-->
    </el-table>

    <div slot="footer" class="dialog-footer">
      <!-- <el-button style="float:left" @click="dialogAdd = true" size="small">导出</el-button> -->
      <!-- <el-button @click="handleDel" size="small">删 除</el-button> -->
      <!-- 分页 -->
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="query.current"
          :page-size="query.size"
          :page-sizes="[10, 40, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 加入黑名单界面 -->
    <el-dialog
      title="黑名单管理"
      custom-class="inner-dialog"
      :close-on-click-modal="false"
      :modal="false"
      :visible.sync="dialogAdd"
      :before-close="handleAddClose"
      width="100%"
    >
      <svg-icon class="back-to-list" icon-class="back" @click="dialogAdd = false"></svg-icon>
      <div style="height:400px">
        <el-scrollbar wrap-style="overflow-x:hidden;height:100%">
          <el-form ref="edit-form" :model="form" label-width="120px" hide-required-asterisk>
            <el-form-item label="黑名单号码：">
              <el-input size="small" v-model="form.blacklistTel" disabled></el-input>
            </el-form-item>
            <el-form-item label="起始时间：">
              <el-date-picker
                v-model="form.beginTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyyMMddHHmmss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="截止时间：">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyyMMddHHmmss"
              ></el-date-picker>
              <el-checkbox
                style="margin-left:10px;color:white"
                v-model="form.isForever"
                @change="handleChange"
              >永久生效</el-checkbox>
            </el-form-item>
            <el-form-item label="描述：">
              <el-input size="small" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="form.remark" type="textarea" :rows="2" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCreate()" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCallrecord } from '@/api/data'
export default {
  props: {
    callDialog: Boolean,
  },
  components: {},
  data() {
    return {
      listLoading: false,
      dialogAdd: false,
      form: {},
      showTree: false,
      value: '',
      groupIndex: '',
      value1: '',
      query: {
        calltype: 'singlecall',
        begintime: '',
        endtime: '',
        beginIndex: 0,
        count: 8,
        current: 1,
        size: 8,
      },
      callTypeMaps: [
        {
          key: '1',
          name: '全部',
        },
        {
          key: '2',
          name: '呼入',
        },
        {
          key: '3',
          name: '紧急呼入',
        },
        {
          key: '4',
          name: '准备呼出',
        },
        {
          key: '5',
          name: '广播',
        },
        {
          key: '6',
          name: '组呼',
        },
        {
          key: '7',
          name: '选呼',
        },
        {
          key: '8',
          name: '点名',
        },
        {
          key: '9',
          name: '轮询',
        },
        {
          key: '10',
          name: '会议',
        },
        {
          key: '11',
          name: '监听',
        },
        {
          key: '12',
          name: '强插',
        },
        {
          key: '13',
          name: '强拆',
        },
      ],
      callResultMaps: [
        {
          key: 1,
          name: '全部',
        },
        {
          key: 2,
          name: '已接',
        },
        {
          key: 3,
          name: '未接',
        },
        {
          key: 4,
          name: '成功',
        },
        {
          key: 5,
          name: '失败',
        },
      ],
      tableData: [],
      total: 0,
    }
  },
  computed: {
    ...mapGetters(['userGroupTreeData']),
  },
  filters: {
    callTypeFilter(status) {
      const statusMap = {
        singlecall: '单呼',
        2: '处理中',
        3: '已完成',
      }
      return statusMap[status]
    },
    directFilter(status) {
      const statusMap = {
        callout: '呼出',
        callin: '呼入',
      }
      return statusMap[status]
    },
  },
  methods: {
    init() {
      //       {
      // 	"calltype":"singlecall", #”singlecall为单呼，groupcall为组呼叫，也就是会议呼叫
      // 	"begintime":"20200413191748", # 开始时间年月日时分秒（选带）
      // 	"endtime":"20200413191806",#结束时间（选带）
      // 	"callingdevice":"2006",#主叫（选带）groupcall时不用带
      // 	"calleddevice":"1001",被叫（选带）groupcall时不用带
      // 	"calldevice":"1001"主叫或者被叫（选带）groupcall时不用带
      // "beginIndex":分页查询开始索引
      //  "count":"分页查询数量
      // }
      this.getList()
    },
    getList() {
      this.query.count = this.query.size
      this.query.beginIndex = this.query.size * (this.query.current - 1)
      getCallrecord(this.query).then((res) => {
        this.total = Number(res.data.recordCount)
        this.tableData = res.data.record_list
        this.listLoading = false
      })
    },

    //搜索
    handleSearch() {
      this.init()
    },
    //关闭
    handleClose() {
      this.$emit('update:callDialog', false)
    },
    // 监听鼠标事件
    clickEvent(e) {
      var box = document.getElementsByClassName(
        `default-select-tree groupTree`
      )[0]
      if (box && !box.contains(e.target)) {
        this.showTree = false
      }
    },
    handleAddClose() {
      this.dialogAdd = false
    },
    //复选框选中
    handleChange(val) {
      if (val) {
        this.form.endTime = ''
      }
    },
    //加入黑名单页面
    handleEdit(row) {
      this.dialogAdd = true
      this.form.blacklistTel = row.calledDevice
    },
    //新增加入黑名单
    handleCreate() {
      let _this = this
      let obj = {
        request: {
          '@id': '100000',
          '@type': 'BlacklistAdd',
          blacklistTel: this.form.blacklistTel,
          description: this.form.description,
          remark: this.form.remark,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime,
        },
      }
      dataflow(obj).then((res) => {
        if (res.status == 200) {
          _this.dialogAdd = false
        }
      })
    },
    //删除
    handleDel() {
      let _this = this
      let delArr = this.$refs.table.store.states.selection
      if (delArr.length == 0) {
        this.$message.warning(this.$t('m.tip.DEL_EMPTY_TIP'))
        return
      }
      this.$confirm(this.$t('m.tip.DELECT_TIP'), this.$t('m.tip.TIPS'), {
        confirmButtonText: this.$t('m.CONFIRM'),
        cancelButtonText: this.$t('m.CANCEL'),
        type: 'warning',
      }).then(() => {
        delArr.forEach((e) => {
          // let obj = {
          //   request: {
          //     '@id': '100000',
          //     '@type': 'GroupDel',
          //     groupID: e.groupID,
          //   },
          // }
          // dataflow(obj).then((res) => {
          // })
        })
      })
    },
    handleSizeChange(val) {
      this.query.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.current = val
      this.getList()
    },
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener('click', this.clickEvent, true)
    })
    this.init()
  },
  destroyed() {
    document.removeEventListener('click', this.clickEvent, true)
  },
}
</script>

<style lang="scss" scoped>
/deep/.record-dialog {
  cursor: default;
  background-color: #1a4969;
  width: 900px;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-dialog__header {
    padding-top: 10px;
    text-align: center;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 0 15px;
    .search-input {
      margin-bottom: 10px;
      color: white;
      .el-input__inner {
        background-color: #1a4969;
        color: #fff;
        // width: 50%;
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: 10px;
    .el-button {
      background-color: #1a4969;
      color: #fff;
      width: 70px;
    }
    .el-button:hover {
      background-color: #00b2ee;
    }
  }
  .el-table {
    td {
      border-bottom: 1px solid #2e67a8;
    }
    tr:hover > td {
      background-color: #2f6b8d;
    }
    background-color: #1a4969;
    .table-herder-custom {
      background-color: #2e67a8;
      color: #fff;
    }
    .table-cell-custom {
      background-color: #172a47;
      color: #fff;
      .el-link {
        color: #fff;
        margin-left: 20px;
        span {
          font-size: 10px;
        }
        &:hover {
          color: #06f7bb;
        }
      }
    }
    /deep/.el-table__body tr.current-row > td {
      background: #6bb5e6 !important;
    }
  }
  .el-dialog__wrapper {
    position: absolute;
    height: 100%;
    .inner-dialog {
      background-color: #1a4969;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0px;
      opacity: 0.96;
      .el-dialog__footer {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
      .back-to-list {
        color: #fff;
        height: 22px;
        width: 22px;
      }
      .el-form {
        .el-form-item__label {
          color: #fff;
        }
        .el-form-item__content {
          width: 80%;
        }
        .el-input__inner,
        .el-textarea__inner {
          background-color: #1a4969;
          color: #fff;
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: white;
        }
        .group-item {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          .svg-icon {
            width: 19px;
            height: 19px;
            margin-right: 5px;
            cursor: pointer;
          }
          .add-label {
            color: #fff;
            cursor: pointer;
          }
          .el-input__inner {
            width: 240px;
          }
          &.add {
            margin-left: -1px;
            font-size: 13px;
            label {
              margin-left: 3px;
            }
            .valid-rule {
              color: #f56c6c;
              margin-left: 20px;
              font-size: 12px;
            }
          }
          .set-defaultNo {
            margin-left: 10px;
            font-style: oblique;
            .el-radio__label {
              font-size: 10px;
            }
          }
        }
      }
      .el-upload {
        .el-button {
          color: #fff;
          background-color: #1a4969;
          margin-top: 10px;
          &:hover {
            background-color: #00b2ee;
          }
        }
      }
    }

    .trial-box {
      position: absolute;
      left: calc(50% - 100px);
      top: calc(50% - 50px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 5px;
      width: 200px;
      height: 100px;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      .el-row {
        color: #fff;
      }
      .trial-loading {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.2s infinite linear;
        @-webkit-keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
      .el-button {
        width: 70px;
        color: #fff;
        background-color: #1a4969;
        margin-top: 10px;
        &:hover {
          background-color: #00b2ee;
        }
      }
      .form-item-group {
        margin: 5px 0;
        .svg-button {
          height: 32px;
          display: flex;
          align-items: center;
          margin-bottom: 18px;
        }
      }
    }
  }
  .default-select-tree {
    right: 30px;
    position: absolute;
    bottom: 15%;
    height: 400px;
    width: 220px;
    background-color: #155175;
    border: 1px solid #fff;
    border-radius: 7px;
    z-index: 999999;
    .tree-scrollbar {
      border-radius: 7px;
      width: 100%;
      height: calc(100% - 40px);
      // background-color: #172a47;
      background-color: #155175;

      .el-tree {
        background-color: #155175 !important;
        color: #fff;
        /deep/.el-tree-node__content {
          height: 34px;
          cursor: default;
          background-color: #155175;
          &:hover {
            background-color: #616d70;
          }
        }
        /deep/.el-tree-node.is-current > .el-tree-node__content {
          background-color: #00b2ee !important;
          color: #ffffff;
        }
        .el-checkbox__input.is-checked {
          .el-checkbox__inner {
            background-color: green;
            border-color: green;
          }
        }
      }
    }
    /deep/.tree-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      margin-right: -20px !important;
    }
    text-align: center;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }
  .el-pagination__jump {
    margin-left: 24px;
    font-weight: 400;
    color: #f5f7fa;
  }
  .el-pagination__total {
    margin-right: 10px;
    font-weight: 400;
    color: #f5f7fa;
  }
}
</style>